<template>
  <div>
    <div class="attendMap">
      <div class="map_left">
        <div id="map-container" />

      </div>
      <div class="map_right">
        <div>
          <div class="list">
            <div v-for="item in companyList" :key="item.id" class="list_one" @click="changeCompany(item)">
              <div :class="item.id==nowId?'active':''">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div style="margin:20px 0;">
          <div>半径</div>
          <el-slider v-model="sliderVal" :min="0" :max="1000" @input="changeMap" />
        </div>
        <div>
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="toSaveAll">批量保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { getAttendanceCompanyList, AttendanceCompanyUpdate } from '@/api/attendance'
export default {
  data() {
    return {
      sliderVal: '', // 公司的打卡半径
      nowId: 0, // 当前选中的公司id
      companyList: [], // 公司列表
      map: null, // 地图实例
      point: [116.683999, 39.537601] // 初始化地图中心点位置
    }
  },
  created() {
    this.getCompany()
  },
  mounted() {

  },
  methods: {
    close() {
      this.$emit('closeDrawer')
    },
    async toSaveAll() { // 批量修改公司列表的半径
      const res = await AttendanceCompanyUpdate({
        list: this.companyList
      })
      console.log(res, '批量修改成功')
      this.$message.success('批量修改成功')
      this.$emit('closeDrawer')
    },
    changeCompany(item) { // 点击切换公司
      this.nowId = item.id// 切换激活样式
      this.point = item.point // 切换中心点坐标
      this.sliderVal = item.radius // 切换半径
      this.makeMap() // 重新生成地图
    },
    changeMap() { // 滑轨半径改变
      this.makeMap()
      // 改变公司列表对应公司的半径
      this.companyList.forEach(item => {
        if (item.id === this.nowId) {
          // 修改公司的半径为滑轨的数据
          item.radius = this.sliderVal
        }
      })
    },
    async getCompany() { // 获取公司列表
      const res = await getAttendanceCompanyList()
      console.log(res, '公司列表')
      this.companyList = res.data
      // 公司列表返回后 初始化地图
      this.point = res.data[0].point // 初始化地图中心点位置
      this.makeMap() // 生成地图
      this.nowId = res.data[0].id// 存储id
      this.sliderVal = res.data[0].radius // 存储半径
    },
    makeMap() { // 生成地图方法
      AMapLoader.load({
        key: '1c5f475b8a1c15525e1c1e94c33137ab', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [] // 需要使
      }).then(AMap => {
        // AMap 地图的操作实例
        this.map = new AMap.Map('map-container', {
          // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 16, // 初始化地图级别
          center: this.point // 初始化地图中心点位置
        })
        // 绘制地图的标点
        const marker = new AMap.Marker({
          position: this.point,
          title: '打开范围'
        })
        this.map.add(marker)

        // 绘制圆形的api
        const circle = new AMap.Circle({
          center: this.point, // 圆心位置
          radius: this.sliderVal, // 圆半径
          strokeColor: '#FF33FF', // 线颜色
          strokeOpacity: 1, // 线透明度
          strokeWeight: 3, // 线粗细度
          fillColor: '#1791fc', // 填充颜色
          fillOpacity: 0.35 // 填充透明度
        })
        this.map.add(circle)
        // 绘制文字在图形上
        const text = new AMap.Text({
          text: this.sliderVal + '米打卡',
          position: this.point,
          offset: [-35, 40], // 偏移量
          style: {
            backgroundColor: 'white',
            color: 'red',
            fontSize: '20px'
          }
        })
        this.map.add(text)

        // 绘制线
        const polyline = new AMap.Polyline({
          path: [
            this.point,
            [this.point[0] + 0.1, this.point[1] + 0.1],
            [this.point[0] + 0.3, this.point[1] + 0.2]
          ],
          strokeColor: '#3366FF', // 线颜色
          strokeOpacity: 1, // 线透明度
          strokeWeight: 10, // 线宽
          strokeStyle: 'solid' // 线样式
        })
        this.map.add(polyline)
      })
    }
  }
}
</script>
<style lang="scss">
  .attendMap{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    .map_left{
      width: 60%;
      height: 600px;
      background: #ccc;
      #map-container{
        width: 100%;
        height: 600px;
      }
    }
    .map_right{
      width: 30%;
      height: 600px;
      // background: #eee;
      margin-left: 5%;
      padding: 20px;
      box-sizing: border-box;
      .list{
        width: 300px;
        height: 500px;
        overflow-y: scroll;
        .list_one{
          height: 50px;
          cursor: pointer;
          line-height: 50px;
          text-align: center;
          &:nth-child(odd){
            background: #ccc;
          }
          &:nth-child(even){
            background: #eee;
          }
          & .active{
            color:white !important;
            background: blue !important;
          }
        }
      }
    }
  }
</style>
